
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="renderer" content="webkit" />

    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Expires" content="-1"/>

    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <title>test</title>
    <link rel="shortcut icon" href="/favicon.ico"/>

</head>
<body>
    <div id="app" @click=_appClick>
        <List :name="title"></List>
    </div>

  <script src="https://cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>

    <script type="text/template" id="tpl">
        <p>{{name}}我要在这里放很多html {{title}}</p>
    </script>

    <script type="text/javascript">
        // var List = Vue.extend({
        //     template: '<p>我要在这里放很多html</p>'
        // })
        // var List = Vue.extend({
        //     template: '#tpl'
        // })
    </script>

    <script>
        var List = Vue.extend({
            template: '#tpl',
            props: ['name'],
            data: function(){
                return {
                    title: '__title'
                };
            }
        })

        Vue.component('List',List);

        new Vue({
            el: '#app',
            // components: 'List',
            components: {List: List},
            data: function () {
                return {
                    title: 'title__'
                };
            },
            methods: {
                _appClick: function () {
                    this.$data.title = this.$data.title + ' + '
                }
            }
        });
    </script>
</body>
</html>
